<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1">
    <title>见微-全媒体记者发稿助手</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
    <link href="__PUBLIC__/bootstrap-switch/bootstrap-switch.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/webUploader/webuploader.css">
    <link href="__PUBLIC__/live/css/column-list-flow.css" rel="stylesheet">
    <link href="__PUBLIC__/live/css/base.css" rel="stylesheet">
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/webUploader/webuploader.min.js"></script>

    <style type="text/css">
        .main-content .wrap {
            position: static;
            width: auto;
            padding: 25px;
        }
        #fileList{width:400px;}
    </style>
</head>

<body>

<include file="Public:header" />
<ul class="breadcrumb">
    <li>
        <a href="/Live">主页</a>
    </li>
    <li>
        <a href="{:U('theme_list')}">专题列表</a>
    </li>
    <li class="active">
        <span>[ {$themeInfo.name} ]设置</span>
    </li>
</ul>
<div class="clearfix"></div>
<div class="main-content">
    <div class="wrap">
        <form class="form-horizontal" method="post" action="{:U('saveThemeSet')}">
            <input type="hidden" name="image_url" value="{$themeInfo.image_url}" data-orginal="{$themeInfo.image_url}" id="image_url">
            <input type="hidden" name="id" value="{$themeInfo.id}" data-orginal="{$themeInfo.id}" id="id">
            <div>
                <div class="form-group">
                    <label for="column_name" class="col-xs-3 control-label">栏目名称</label>
                    <div class="col-xs-9">
                        <input type="text" class="form-control" name="name" id="column_name" placeholder="栏目名称" value="{$themeInfo.name}">
                    </div>
                </div>

                <div class="form-group">
                    <label for="status" class="col-xs-3 control-label">是否隐藏专题</label>
                    <div class="col-xs-9">
                        <div class="switch">
                            <input type="checkbox" value="1" name="status" id="status" <?php if($themeInfo['status']){ echo "checked";} ?> data-on-color="danger" data-on-text="显示" data-off-text="隐藏" />
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="status" class="col-xs-3 control-label">专题封面图片</label>
                    <div class="col-xs-9">
                        <div id="fileList" class="uploader-list">
                            <notEmpty name="themeInfo.image_url">
                                <div id="WU_FILE_0" class="file-item thumbnail">
                                    <img src="{$themeInfo.image_url}" alt="" style="width: 100%">
                                </div>
                            </notEmpty>
                        </div>
                        <div id="filePicker">选择封面图片</div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="content" class="col-xs-3 control-label">专题简介</label>
                    <div class="col-xs-9">
                        <textarea class="form-control" id="content" name="content" rows="9" maxlength="200">{$themeInfo.content}</textarea>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <hr>
            <div class="form-group text-right">
                    <button type="reset" class="btn btn-default">重置</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button type="submit" class="btn btn-danger" id="sureBtn">确定，保存修改</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>

        </form>



    </div>
</div>

<div id="mask"></div>
<div id="working">
    <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
    <span class="sr-only">保存中...</span>
</div>

<div id="dialog-message" title=""></div>
<script src="__PUBLIC__/bootstrap-switch/bootstrap-switch.min.js"></script>
<script>
    $('.switch input').bootstrapSwitch();
    $('form').on('reset',function(){
        $("input:hidden").each(function(){
            $(this).val($(this).data('orginal'))
        })
    })

    var uploader = WebUploader.create({
        auto: false,
        swf: '__PUBLIC__/webUploader/Uploader.swf',
        server: 'http://upload.qiniu.com',
        pick: '#filePicker',
        thumb:{
            width: 400,
            height:225,
            crop: false,
        },
        formData:{
            token:"{$uploadToken}"
        },
        fileNumLimit:1,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    uploader.on('beforeFileQueued',function(){
        $("#sureBtn").attr('type','button').prop('disabled',false);
        $("#fileList").empty();
        uploader.reset();
    });
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
                        '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '</div>'
                ),
                $img = $li.find('img');

        $('#fileList').append( $li );

        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        });
    });

    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                    .appendTo( $li )
                    .find('span');
        }
        $percent.css( 'width', percentage * 100 + '%' );
    });


    uploader.on( 'uploadSuccess', function( file,response ) {
        $( '#'+file.id ).addClass('upload-state-done');
        $("#image_url").val("{:C('IMAGE_HOST')}"+response.key);
        $("#sureBtn").attr('type','submit').prop('disabled',false);
        $("form").submit();
    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }
        $error.text('上传失败');
    });


    uploader.on( 'uploadComplete', function( file ) {
        $("#sureBtn").prop('disabled',false);
        $( '#'+file.id ).find('.progress').remove();
    });

    $("#sureBtn").click(function(){
        if($(this).is(":button")){
            uploader.upload();
        }

    })
</script>
</body>
</html>